<template>
    <div class="popupview">
        <button class="transBtn" type="button" @click="transContent">提取内容</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
        };
    },
    created() {
        console.log("popup.js");
    },
    methods: {
        async transContent() {
            let tabId = await this.getCurrentTab();
            console.log(tabId);
            if(!tabId){
                return
            }
            let data = {
                action: "trans",
                url: tabId?.url
            }
            if (tabId) {
                // 给content.js发送消息
                chrome.tabs.sendMessage(tabId.id, data, function(){
                    console.log('发送成功');
                    window.close();
                });
            }
        },

        async getCurrentTab() {
            let queryOptions = {active: true, currentWindow: true};
            // `tab` will either be a `tabs.Tab` instance or `undefined`.
            let [tab] = await chrome.tabs.query(queryOptions);
            return tab;
        },
        errorInfo(info) {
            info = info || "";
            var ele = document.createElement("p");
            ele.innerHTML = `<div>${info}</div>`;
            this.$refs.loginBtn.before(ele);
            ele.classList.add("error");
            this.tipCount++;
            setTimeout(() => {
                ele.remove();
                this.tipCount--;
            }, 3000);
        },
    },
};
</script>
<style scoped lang="scss">
.popupview {
    width: 200px;
    padding: 20px;
    .flex{
        display: flex;
        align-items: center;
        &.flex-right{
            justify-content: flex-end;
        }
    }
    #desc{
        width: 100%;
        padding: 5px;
        font-size: 13px;
        border-radius: 5px;
        box-sizing: border-box;
        height: 80px;
    }
    .transBtn{
        width: 100%;
        text-align: center;
        background-color: #4b97a6;
        color: #fff;
        border: none;
        height: 30px;
        line-height: 30px;
        border-radius: 5px;
        &[disabled]{
            background-color: #c1c1c1;
            cursor: no-drop;
        }
    }
}
</style>